<template>
  <view class="c-badge">
    <slot></slot>
    <view class="c-badge-number" :style="`transform: translateX(${props.offsetX}) translateY(${props.offsetY})`" v-if="!props.hide && props.number != null">{{ props.number }}</view>
  </view>
</template>
<script setup>
import { View } from '@tarojs/components';
import { computed } from 'vue';

const props = defineProps({
  max: {
    type: Number,
    default: 99
  },
  number: Number,
  hide: Boolean,
  offsetX: {
    type: [Number, String],
    default: 0
  },
  offsetY: {
    type: [Number, String],
    default: 0
  }
});

const value = computed(() => {
  if (isNaN(props.number)) return props.number;
  if (!isNaN(props.max) && props.max < props.number) {
    return `${props.max}+`;
  }
  return props.number;
});
</script>
<style lang="scss">
.c-badge {
  position: relative;
  .c-badge-number {
    position: absolute;
    min-width: 30px;
    background-color: var(--color-danger);
    color: var(--color-caption);
    font-size: 20px;
    text-align: center;
    padding: 0 6px;
    line-height: 30px;
    height: 30px;
    border-radius: 15px;
    top: 0;
    right: 0;
  }
}
</style>
